<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" :model="formState">
        <a-form-item name="logLevel" label="日志级别">
          <a-select v-model:value="formState.logLevel" placeholder="请选择">
            <a-select-option value="">选择全部</a-select-option>
            <a-select-option value="INFO">INFO</a-select-option>
            <a-select-option value="ERROR">ERROR</a-select-option>
            <a-select-option value="DEBUG">DEBUG</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card :bordered="false" class="mt-2 flex-1" size="small">
      <BaseTable
        :data-source="tableData"
        fill
        :columns="columns"
        bordered
        :loading="loading"
        :pagination="{ total: totalCount }"
        @change="({ current, pageSize }) => getData(current, pageSize)"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" @click="onEdit(record)">明细</a-button>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Detail v-model:open="open" :row-data="rowData" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import Detail from './Detail'

const rowData = ref(null)
const open = ref(false)
const loading = ref(false)
const tableData = ref([])
const formRef = ref(null)
const formState = ref({})
const totalCount = ref(0)
const columns = [
  { title: '序号', dataIndex: 'xh', width: 80 },
  { title: '应用名称', ellipsis: true, dataIndex: 'applicationName' },
  { title: '功能模块', ellipsis: true, dataIndex: 'applicationModule' },
  { title: '日志级别', ellipsis: true, dataIndex: 'logLevel' },
  { title: '日志内容', ellipsis: true, dataIndex: 'content' },
  { title: '创建时间', ellipsis: true, dataIndex: 'createTime' },
  { title: '归档时间', ellipsis: true, dataIndex: 'backupTime' },
  { title: '创建人', ellipsis: true, dataIndex: 'createUser' },
  { title: '操作', fixed: 'right', dataIndex: 'action', width: 80 }
]

const onEdit = (row) => {
  open.value = true
  rowData.value = { ...row }
}
const getData = async (pageNum = 1, pageSize = 10) => {
  loading.value = true
  const { code, data, total } = await post('/ufs/log/getLogHistoryList', {
    pageNum,
    pageSize,
    ...formState.value
  })
  loading.value = false
  if (code === 0) {
    tableData.value = data
    totalCount.value = total
  }
}

onMounted(() => {
  getData()
})
</script>
